<template>
	<view class="invitation">
		<view class="invitation-wrap">
			<view class="banner">
				<image src="http://nsfadmin.womiwuyou.com/uploads/image/20231210/4fc23d26-21db-4087-b1e5-ea4686aa79e7.png"></image>
			</view>
			<view class="row-center mt30 mb30">
				<button open-type="share" class="invitation-btn" hover-class="none">
					去邀请
				</button>
			</view>
			<view v-for="item in lists" :key="item.userId" class="invitation-list row-between mb20">
				<view class="row">
					<image class="img-wrap mr20" :src="item.avatar"></image>
					<view>{{item.nickname}}</view>
				</view>
				<view :class="'status status-'+ item.status">
					{{item.status ? '邀请成功' : '未下单'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getInvitationList
	} from '@/api/user'
	import {
		loadingFun,
	} from '@/utils/tools'
	import {
		loadingType
	} from '@/utils/type'
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				lists: [],
				page: 1,
				status: loadingType.LOADING,
			};
		},
		onLoad() {
			this.loadmore()
		},
		onReachBottom() {
			this.loadmore()
		},
		onPullDownRefresh() {
			this.lists = []
			this.loadmore()
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: shareInfo.mnp_share_title,
				imageUrl: shareInfo.imageUrl,
				path: "pages/launch_page/launch_page?invite_code=" + this.inviteCode
			};
		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			async loadmore() {
				let {
					page,
					lists,
					status
				} = this
				const data = await loadingFun(getInvitationList, page, lists, status)
				if (!data) return
				this.page = data.page
				this.lists = data.dataList
				this.status = data.status
			}
		},
		computed: {
			...mapGetters(["inviteCode"])
		}
	}
</script>

<style lang="scss">
	.invitation {
		position: relative;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;

		&::before,
		&::after {
			content: '';
			position: fixed;
			z-index: 19;
			top: 0;
			width: 100%;
			height: 20rpx;
			background-color: #FFCC46;
		}

		&::after {
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
		}

		&-wrap {
			margin: 30rpx 24rpx;

			.banner {
				height: 344rpx;
				background: #F7F7F7;
				border-radius: 20rpx;

				>image {
					width: 100%;
					height: 100%;
				}
			}

			.img-wrap {
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.2);
				width: 120rpx;
				height: 120rpx;
			}

			.status {
				color: #E94E06;

				&-1 {
					color: #32C908;
				}
			}
		}

		&-list {
			padding: 20rpx 26rpx;
			background-color: #F7F7F7;
			border-radius: 20rpx;
		}

		&-btn {
			width: 460rpx;
			background-color: #FF8F00;
			border-radius: 45rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}
	}
</style>
